<template>
    <div class="tab1">
        <h2>直播课程</h2>
        <a-tabs default-active-key="1" @change="callback" style="height: 300px;" tabPosition="right" >
            <a-tab-pane key="1" tab="直播结束 研究生复试之高效准备简历的方法">
                <div class="tabb">
                    <img  src="https://online-course.nos-eastchina1.126.net/123-1252130152859566080.png" alt="">
                    <div class="meng" style="z-index: 100;">
                        <h2>研究生复试之高效准备简历的方法</h2>
                        <p><a-icon type="check-circle" /><span>直播结束</span></p>
                        <a-button type="primary" style="width: 150px; height: 40px; font-size: 20px">
                            直播结束
                        </a-button>
                    </div>
                </div>
            </a-tab-pane>
            <a-tab-pane key="2" tab="直播结束 十大金典排序之Part-6-完结篇" force-render>
                <div class="tabb">
                    <img src="https://online-course.nos-eastchina1.126.net/数据结构与算法 基础篇 拷贝-1252123020651134976.jpg" alt="">
                    <div class="meng" style="z-index: 200;">
                        <h2>十大金典排序之Part-6-完结篇</h2>
                        <p><a-icon type="check-circle" /><span>直播结束</span></p>
                        <a-button type="primary" style="width: 150px; height: 40px; font-size: 20px">
                            直播结束
                        </a-button>
                    </div>
                </div>



            </a-tab-pane>
            <a-tab-pane key="3" tab="05-08 23：00  高考之殇与痛则思变">
                <div class="tabb">
                    <img src="https://online-course.nos-eastchina1.126.net/封面-1258625253353979904.png" alt="">
                    <div class="meng" style="z-index: 300;">
                        <h2>高考之殇与痛则思变</h2>
                        <p><a-icon type="check-circle" /><span>直播结束</span></p>
                        <a-button type="primary" style="width: 150px; height: 40px; font-size: 20px">
                            直播结束
                        </a-button>
                    </div>
                </div>

            </a-tab-pane>
            <a-tab-pane key="4" tab="05-08 23：00  高考之殇与痛则思变" >
                <div class="tabb">
                    <img src="https://online-course.nos-eastchina1.126.net/直播封面-1254953535796150272.png" alt="">
                    <div class="meng" >
                        <h2>研究生复试之高效准备简历的方法</h2>
                        <p><a-icon type="check-circle" /><span>直播结束</span></p>
                        <a-button type="primary" style="width: 150px; height: 40px; font-size: 20px">
                            直播结束
                        </a-button>
                    </div>
                </div>

            </a-tab-pane>
        </a-tabs>
    </div>
</template>
<script>
    export default {
        data() {
            return {};
        },
        methods: {
            callback(key) {
                console.log(key);
            },
        },
    };
</script>

<style lang="less" scoped>
    .tab1{
        text-align: center;
        width: 1200px;
        margin: 20px auto;


    }

   /deep/ .ant-tabs .ant-tabs-right-bar {
        float: right;
        margin-bottom: 0;
        margin-left: -1px;
        border-left: 1px solid #e8e8e8;
       width: 600px;
    }
    /deep/.ant-tabs-tab{
        text-align: left;
    }
    .tabb{
        height: 300px;
        width: 600px;
        position: relative;
        img{
            height: 300px;
            width: 600px;
        }
        .meng{
            width: 600px;
            height: 300px;
            background-color: rgba(0,0,0,0.5);
            text-align: center;
            position: absolute;
            left: 0px;
            top: 0px;
            z-index: 200;
            color: white;
            h2{
                margin-top: 50px;
                margin-bottom: 40px;
                color: white;
            }
        }
    }


</style>